<template>
    <div class="province-data">
        <div class="data-item">
            <div class="icon">
                <el-icon :size="iconSize['size']">
                    <Odometer/>
                </el-icon>
            </div>
            <div class="data">
                <span class="title">全省当天履职总数</span>
                <span class="total">{{ currencyFormatter(data.SendPoliceDay) }}</span>
            </div>
        </div>
        <div class="data-item">
            <div class="icon">
                <el-icon :size="iconSize['size']">
                    <VideoCamera/>
                </el-icon>
            </div>
            <div class="data">
                <span class="title">全省视频接入总数</span>
                <span class="total">{{ currencyFormatter(data.videoCount) }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>

import {Odometer, VideoCamera} from "@element-plus/icons-vue";
import {getStatisticsData} from "@/api/Dashboard/StatisticsRegion.js";

const data = ref({})
const iconSize = reactive({
    size: 25
})

const currencyFormatter = (numbers = 0) => {
    return numbers.toLocaleString('en-US', {minimumFractionDigits: 0, maximumFractionDigits: 0});
}

let intervalId;
onMounted(() => {
    getData()
    // 设置定时器，每10秒获取一次数据
    intervalId = setInterval(getData, 2 * 60 * 1000);
})

onUnmounted(() => {
    if (intervalId) {
        clearInterval(intervalId);
    }
})

const getData = async () => {
    const res = await getStatisticsData()
    data.value = res.data
}
</script>

<style scoped lang="scss">
.province-data {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;

    .data-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;




        .icon {
            display: flex;
            margin-right: 1rem;
            background: rgb(144 147 153 / 7%);
            border-radius: 50%;
            padding: 10px;
        }

        .data {
            display: flex;
            flex-direction: column;
            align-items: flex-start;

            .title {
                --title-size: 0.9375rem;
                font-size: var(--title-size);
                line-height: calc(var(--title-size) + 0.5rem);
                font-weight: bolder;
                color: var(--data-text-color);
            }

            .total {
                --title-size: 25px;
                color: #2cf7fe;
                text-shadow: 0 0 0.3rem #00d8ff;
                font-size: var(--title-size);
                line-height: calc(var(--title-size) + 0.5rem);
                font-weight: bolder;
                letter-spacing: 3px;
                font-family: monospace;
            }
        }
    }
}
</style>